﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script src="js/MyMusic_1.0.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {
            //初始化代码
            $(".body_menu a").first().css("background-color", "#4B8DF8");
        });
    
    </script>
    <style type="text/css">
        /* 全局色彩*/
        *
        {
            margin: 0;
        }
        a
        {
            text-decoration: none;
            color: White;
        }
        /* 背景颜色*/
        body
        {
            background-color: #EFDBCC;
        }
        /* 头部-------------------------------------------------------------------------------*/
        .head
        {
            width: 100%;
            height: 69px;
            background-color: #3c3c3c;
        }
        .head_1
        {
            width: 800px;
            margin: 0 auto;
            border: 1px red solid;
        }
        /* 菜单*/
        .logo
        {
            color: #ffffff;
            width: 150px;
            height: 69px;
            text-align: center;
            line-height: 69px;
            letter-spacing: 2px;
            background-color: Green; /* font-family: Bookman Old Style;*/
            font-family: "Hiragino Sans GB" , "Hiragino Sans GB W3" , "Microsoft YaHei" , "微软雅黑" ,tahoma,arial,simsun, "宋体";
            font-size: 18px;
        }
        /*登陆注册*/
        .menu
        {
            margin-right: 0px;
            margin-top: -69px;
            line-height: 55px;
            float: right;
            display: block;
            font-family: 宋体;
        }
        .menu a
        {
            width: 150px;
            height: 50px;
            background-color: #2E91B7;
            display: block;
            text-align: center;
            float: left;
            margin-top: 9px;
            margin-right: 10px;
        }
        .menu a:hover
        {
            background-color: #4B8DF8;
        }
   /*中间部分------------------------------------------------------------------------*/
        .music
        {
            width: 800px;
            height: 200px;
            margin: 10px auto; /*  border-width:8px;
          border-style: solid dashed dashed solid;
          border-color: #cccccc transparent transparent #cccccc;
        */
            border-top: 8px solid #7EB0BB;
            border-left: 8px solid #7EB0BB;
            border-right: 5px solid #7EB0BB;
            border-bottom: 2px solid #7EB0BB;
            background-color:#F8F8F8;
        }
        /*
       *播放器右边放作者的图片
      */
        .music .Author
        {
            width: 280px;
            height: 200px;
            font: 9px 'Lucida Sans Unicode' , 'Trebuchet MS' , Arial, Helvetica;
            background-color: #212121;
            background-image: url(images/music/Music.jpg);
            float: left;
        }
        /*
       *播放器
      */
        .music .MusicBox
        {
            width: 500px;
            height: 200px;
            float: left;
            margin-left: 15px;
            border: 1px #7EB0BB solid;
        }
        /*
        *作者信息 时间的显示
       */
        .music .MusicBox .ProcessControl .SongName, .SongAuthor
        {
            margin-left: 10px;
            margin-top: 5px;
            font-family: 宋体;
            font-size: 20px;
            color: #51BAE6;
            font-weight: bolder;
        }
        .SongAuthor
        {
            color: #1d1d1d;
        }
        /*
        * 时间的显示
       */
        .music .MusicBox .ProcessControl .SongTime
        {
            width: 120px;
       
            margin-left: 50px;
            margin-top: 15px;
            float:left;
            text-align:center;
        }
        /*时间条*/
        .music .MusicBox .ProcessControl .Process
        {
            width: 400px;
            height: 4px;
            margin: 0px auto;
            background-color: #D6C2B3;
        }
          .music .MusicBox .ProcessControl .Process_1
        {
            width: 0px;
            height: 4px;
            margin: -4px auto;
			margin-left:50px;
            background-color: #7EB0BB;
        }
        /*
        播放控制
        */
        .Process_style
        {
           width:30px;
           height:30px;
           margin-top:6px;
           margin-left:130px;
           border:1px red solid;
           background-image:url("images/caozuo.jpg");
           background-repeat:no-repeat;
           background-position:-1px -47px;
           float:left;
        
        }
       .Process_style:hover
       {
          background-color:White;
       }
        /*
        *声音控制
       */
       .Voice
       {
           width:150px;
           margin-left:350px;
      
           }
        .VoiceEmp
        {
            width: 30px;
            height:30px;
            margin-top:6px;
            float: left;
            background: url("images/caozuo.jpg") 0px 5px no-repeat;
       
        }
        
        .VoidProcess_1
        {
            width: 66px;
            height: 6px;
            float: left;
            margin-top: 22px;
            background:url("images/music/voice.jpg")-148px -24px no-repeat;
            background-color:#7EB0BB;
        }
      
        
        /*
        *控制
        */
        .control
        {
            width:600px;
            height: auto;
            float:left;
            margin-top:10px;
            }
    .LeftControl
   {
      width:44px;
      float:left; 
      height:44px;
    
      background:url(images/music.jpg)-2px -1px no-repeat;
      margin-right:40px;
      margin-left:150px;
   }
   

   
   .RightControl
   {
      width:44px;
      float:left; 
      height:44px;
     
      background:url(images/music.jpg) -179px -1px no-repeat;
       margin-right:40px;
   }
   
   
      .MainControl
   {
      width:44px;
      float:left; 
      height:44px;
    
    
	   background:url(images/music.jpg)-2px -60px no-repeat;
       margin-right:40px;
   }
   
  /* 
   .MainControl:hover
   {
      background:url(../images/music.jpg)-2px -60px no-repeat;
   }
   */
   
   .StopControl
   {
      width:44px;
      float:left; 
      height:44px;
    
       background:url(images/music.jpg)-61px -178px no-repeat;
       margin-right:40px; 
   }
   
 /*  
   .StopControl:hover
   {
      background:url(../images/music.jpg)-61px -178px no-repeat;
   }
   */
   
   /*播放说明*/
   .body_menu
   {
       width:800px;
       height:50px;
       margin:10px auto;
    
       float:left;
       line-height:50px;
       display:block;
       border-bottom:1px #4B8DF8 solid;
       }
   .body_menu a
   {
        width: 150px;
            height: 50px;
            background-color: #2E91B7;
            display: block;
            text-align: center;
            float: left;
            margin-right: 10px;
   }
   .body_menu a:hover
   {
     background-color: #4B8DF8;
       }
     /*搜索*/
     .search
     {
         width:200px;
         height:30px;
         float:left;
         margin-top:6px;
         margin-left:10px;
         border:1px #2E91B7 solid;
         border-right:0px;
         }
       .search_image
       {
           width:100px;
           height:32px;
           float:left;
           margin-top:6px;
           margin-left:-1px;
         border:1px #2E91B7 solid;
         border-left:0px;
           
           }
		.MusicList{
		
		float:left;
		width:800px;
		margin:2px;
		
		}
		table {border-collapse: collapse;border-spacing: 0;}
	    td
	    {
	      padding-left:15px;
	        }
        tr
        {
          background-color:#7EB0BB;
          height:40px;
            }
        
</style>

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

    <div class="music">
        <div class="Author">
        </div>
        <div class="MusicBox">
            <audio id="myMusic"> </audio>
            <div class="ProcessControl">
                <div class="SongName">
                    我的MUSIC!</div>
                <div class="SongAuthor">
                    陈奕迅</div>
                <div class="Process">
                </div>
                <div class="Process_1">
                </div>
                <div class="Process_style">
                </div>
                <div class="SongTime">
                    00:00&nbsp;|&nbsp;00:00</div>
                <div class="Voice">
                    <div class="VoiceEmp">
                    </div>
                    <div class="VoidProcess_1">
                    </div>
                    
                </div>
            </div>
            <div class="control">
            <div class="LeftControl">
            </div>
            <div id="MainControl" class="MainControl">
            </div>
            <div class="RightControl">
            </div>
            </div>
        </div>
          <div class="body_menu">
            <a href="#">分门别类</a>
            <a href="#">最近播放</a>
            <a href="#">喜欢</a>
            <input type="text" class="search" value="  歌曲名"/><img src="images/search.jpg" class="search_image"/>
        </div>
        <div class="MusicList">
         <table>
		 <tr>
		       <th>歌曲名</th>
			   <th>歌手</th>
			   <th>SRC</th>
			   <th>img</th>
			   <th>lrc</th>
			   <th>操作</th>
		 </tr>
		 <tr>
		       <td>想你的夜</td>
			   <td>关喆</td>
			   <td>music/关喆 - 想你的夜.mp3</td>
			   <td>images/music/关喆.jpg</td>
			   <td></td>
		 </tr>
		  <tr>
		       <td>稳稳地幸福</td>
			   <td>陈奕迅</td>
			   <td>music/稳稳的幸福.mp3</td>
			   <td>images/music/稳稳的幸福.jpg</td>
			   <td></td>
		 </tr>
		  <tr>
		       <td>好久不见</td>
			   <td>陈奕迅</td>
			   <td>music/好久不见-陈奕迅.mp3</td>
			   <td>images/music/陈奕迅.jpg</td>
			   <td></td>
		 </tr>
		  <tr>
		       <td>致青春</td>
			   <td>王菲</td>
			   <td>music/致青春.mp3</td>
			   <td>images/music/王菲.jpg</td>
			   <td></td>
		 </tr>
		 </table>
           
        </div>
    </div>

    <div class="bottom">
    </div>
</body>
</html>
